<template>
  <div class="reacharge">
    <div class="header">
      <table>
        <tr>
          <td><span>UID：</span></td>
          <td style="margin-left:-35px;">
            <el-input v-model="uid" placeholder="请输入玩家uid"></el-input>
          </td>
          <td>
            <el-button type="primary" @click="search()">查询</el-button>
          </td>
          <td style="font-size: 20px">
            <span>该玩家总充值金额：</span>
            <span>{{ dollarAll }}</span>
          </td>
        </tr>
      </table>
    </div>
    <div class="content">
      <el-main v-loading="loading">
        <el-table
          border
          :header-cell-style="{
            color: '#333',
            fontFamily: 'MicrosoftYaHeiUI',
            fontWeight: 500,
            fontSize: '16px',
          }"
          :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
          :fit="true"
          @sort-change="sortChange"
        >
          <el-table-column
            prop="server_id"
            sortable
            label="服务器"
          ></el-table-column>
          <el-table-column 
           prop="uid" 
           sortable 
           label="UID"
          ></el-table-column>
          <el-table-column
            prop="date"
            sortable
            :formatter="formatDate"
            label="时间"
          ></el-table-column>
          <el-table-column
            prop="dollar"
            sortable="custom"
            label="金额"
          ></el-table-column>
          <el-table-column
            prop="recharge_id"
            sortable
            label="充值ID"
          ></el-table-column>
          <el-table-column
            prop="gift_id"
            sortable
            label="礼包ID"
          ></el-table-column>
        </el-table>
        <pageNation
          :total="tableData.length"
          :page-size="pageSize"
          @pageChange="pageChange"
          :page_index="currentPage"
        />
      </el-main>
    </div>
  </div>
</template>
<script>
import pageNation from "../../components/pagenation/pageNation";
import {formatDate,sortFun} from "../../utils/index"
let map = new Map();
export default {
  name: "Recgarge",
  components: { pageNation },
  data() {
    return {
      tableData: [],
      dollarAll: 0,
      formatDate:formatDate,
      currentPage: 1, //当前页数
      pageSize: 10, //每页的数据
      loading: false,
      uid: "",
    };
  },
  mounted() {
    this.first_time = window.localStorage.getItem("first_time");
    this.last_time = window.localStorage.getItem("last_time");
    this.$http.get("/api/gmtool/getServer").then((res) => {
      res.data.result.forEach((item) => {
        map.set(item.serverId, item.serverName);
      });
    });
  },
  methods: {
    //分页
    pageChange(item) {
      this.currentPage = item.page_index;
      this.pageSize = item.page_limit;
    },
    //排序
    sortChange(column, prop, order) {
      if (column.prop === "dollar") {
        this.tableData = this.tableData.sort(
          sortFun(column.prop, column.order === "ascending")
        );
      }
    },
    //查询
    search() {
      let arr = [];
      if (this.uid == "") {
        this.$message({
          type: "warning",
          message: "请输入需要查询的uid",
        });
        return;
      }
      this.loading = true;
      this.$http.post("/api/role/recharge", {
        uid: this.uid,
      }).then((res) => {
          if (res.data.result.length > 0) {
            res.data.result.forEach((item) => {
              let obj = {
                server_id: map.get(item.server_id),
                uid: item.uid,
                date: item.date,
                dollar: item.dollar,
                recharge_id: item.recharge_id,
                gift_id: item.gift_id,
              };
              arr.push(obj);
            });
            this.tableData = arr;
            this.dollarAll = res.data.dollarAll.toFixed(2);
            this.loading = false;
          } else {
            this.$message({ type: "warning", message: "没有对应的数据" });
            this.loading = false;
            return;
          }
        });
    }
  }
};
</script>
<style scoped>
.reacharge {
  width: 100%;
  height: auto;
  background-color: #fff;
}
.reacharge td {
  padding: 18px;
  font-size: 14px;
  display: flex;
  float: left;
}
</style>